<template>
  <div>
    {{ d.num.toFixed(0) }}
  </div>
</template>
<script setup>
import { reactive,watch } from "vue"
import gsap from "gsap"

// 用于接收从父组件传递过来的数据
const props = defineProps({
  value:{
    type:Number,
    default:0 //父组件未传递时使用该默认值
  }
})

// 数字从0开始
const d = reactive({
  num:0
})

// 动画效果--用0.5s的时间实现从0-父组件传递的数据
function AnimateToValue(){
   gsap.to(d,{
    duration:0.5,
    num:props.value
   })
}
AnimateToValue()

// 监听父组件数据有没有变化，如果变化了就重新滚动实现动画
watch(()=>props.value,()=>AnimateToValue())


</script>